<template>
  <div style="display: inline-block">
    <el-dialog :visible.sync="dialogVisible"
               width="430px"
               :show-close="false"
               class="CodeDialogBox">
      <div class="box"
           ref="imageWrapper">
        <img class="imgBackground"
             :src="carrierImg" />
        <div class="top">
          <div class="company">{{ companyName }}</div>
          <div class="describe">正在邀请您注册物流源</div>
        </div>
        <div class="content">
          <div class="weChat">
            <!-- <img :src="carrierImg" /> -->
            <span>无需下载，微信扫一扫</span>
          </div>
          <div class="bottom">
            <div>
              <el-button class="copy"
                         @click="copyPic">复制</el-button>
            </div>
            <span>（点击复制，将此链接粘贴至微信分享即可）</span>
          </div>
        </div>
      </div>
      <div class="footer">
        <!-- <div @click="handleClose">
          <i class="el-icon-close"></i>
        </div> -->
      </div>
    </el-dialog>
    <el-button @click="getQRCode"> 邀请承运方 </el-button>
  </div>
</template>

<script>
import carrier from "@api/modules/carrier.js";
export default {
  name: "InviteSupplier",

  data () {
    return {
      dialogVisible: false,
      imgUrl: "",
      companyName: sessionStorage.companyName,
      carrierImg: ""
    };
  },
  mounted () {
    // this.getQRCode();
  },
  methods: {
    getQRCode () {
      this.dialogVisible = true;
      let params = {
        autoBalance: 0
      };
      carrier.inviteCarrier(params).then((res) => {
        const { data } = res;
        this.carrierImg = data;
      });
    },
    copyPic () {
      let textarea = document.createElement("textarea");
      textarea.setAttribute("readonly", "readonly");
      textarea.value = this.imgUrl;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      if (document.execCommand("copy")) {
        this.$message({
          message: "复制成功",
          type: "success"
        });
        this.handleClose();
      }
    },
    handleClose () {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.CodeDialogBox >>> .el-dialog__header {
  padding: 0;
}
.CodeDialogBox >>> .el-dialog__body {
  padding: 0;
}
</style>
<style lang="scss" scoped>
.CodeDialogBox {
  .box {
    // width: 430px;
    height: 600px;
    background: var(--prev-bg-white);
    box-sizing: border-box;
    position: relative;
    .imgBackground {
      width: 100%;
      height: 100%;
    }
    .top {
      position: absolute;
      left: 0;
      top: 154px;
      width: 100%;
      height: 90px;
      background: var(--prev-bg-white);
      div {
        text-align: center;
        line-height: 26px;
      }
      .describe {
        font-size: 16px;
        font-weight: 700;
      }
    }
    .content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 150px;
      background: var(--prev-bg-white);
      .weChat {
        position: absolute;
        bottom: 98px;
        left: 0;
        width: 100%;
        text-align: center;
        margin-top: 6px;
        img {
          width: 28px;
          height: 23px;
          vertical-align: middle;
        }
        span {
          font-size: 14px;
          color: var(--prev-color-text-silvergrey);
        }
      }
      .bottom {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        .copy {
          width: 120px;
          border-radius: 8px;
          background: var(--prev-color-primary);
          text-align: center;
          color: var(--prev-bg-white);
          font-size: 18px;
          margin: 0 auto;
        }
        .copy:hover {
          background: #ff854f;
        }
        .copy:active {
          background: #c85725;
        }
        span {
          color: var(--prev-color-text-silvergrey);
        }
      }
    }
  }
  .footer {
    padding-top: 10px;
    div {
      width: 24px;
      height: 24px;
      background: var(--prev-bg-white);
      border-radius: 50%;
      margin: 0 auto;
      text-align: center;
      font-size: 18px;
      line-height: 24px;
      cursor: pointer;
    }
  }
}
</style>
